<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta name="keywords" content="">
<meta name="description" content="">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册-西安黑咖啡网络科技有限公司</title>
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/swiper.min.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/font.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/head.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/nav.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/swiper.min.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/footer.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/register/register.css">
<link rel="stylesheet" href="../css/register.css">
<link rel="stylesheet" href="../css/swiper.min.css">
<script type="text/javascript" src="http://temp.xablackcoffee.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://temp.xablackcoffee.com/js/swiper.min.js"></script>
<script type="text/javascript" src="http://temp.xablackcoffee.com/js/register/register.js"></script>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript" src="../js/swiper.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/register.js"></script>
<script type="text/javascript" src="../js/nav.js"></script>
<script type="text/javascript" src="../js/footer.js"></script>
</head>


<body>
    <div class="containers">
        <!-- 头部 -->
        <header style="display:none">
            <div class="login">
                <div class="login_menu">
                    <ul>
                        <li onclick="pageChange(event)"><a href="login.html" target="_blank">登录</a></li>
                        <li onclick="pageChange(event)"><a href="register.html" target="_blank">注册</a>
                        </li>
                        <li onclick="pageChange(event)" id="cartShow"><a class="car"><span
                                    class="icon iconfont icongouwuche1"></span> <span style="cursor:pointer">购物车</span>
                                (<span class="cart_count" id="cart_total">0</span>)</a></li>
                    </ul>
                    <div class="cart_details" style="display:none">
                        <ul id='cart'>
                        </ul>
                        <div class="details_bottom">
                            共<span class="total_money" id="goods_count">0</span>件 合计<span class="total_money"
                                id="goods_amount">0</span>元
                        </div>
                    </div>
                </div>
            </div>
            <div class="wraps">
                <div class="toolbar">
                    <a class="left" href="http://www.xablackcoffee.com/">
                        <img src="image/logo-new.png" alt="">
                    </a>
                    <ul id="tab">
                        <li class="indexs" onclick="pageChange(event)"><a href="index.html" target="_self">首页</a></li>
                        <li class="indexs" onclick="pageChange(event)"><a href="serviceItems.html"
                                target="_self">服务项目</a></li>
                        <li class="indexs" onclick="pageChange(event)"><a href="case.html" target="_self">案例</a></li>
                        <li class="indexs" onclick="pageChange(event)"><a href="product.html" target="_self">产品</a></li>
                        <li class="indexs" onclick="pageChange(event)"><a href="information.html" target="_self">资讯</a>
                        </li>
                        <li class="indexs" onclick="pageChange(event)"><a href="commonProblem.html"
                                target="_self">常见问题</a></li>
                        <li class="indexs" onclick="pageChange(event)"><a href="aboutus.html" target="_self">关于我们</a>
                        </li>
                    </ul>
                </div>
            </div>

        </header>
        <!-- 中间 -->
        <nav>
            <div class="wrap">
                <div class="container">
                    <div class='title'>注册</div>
                    <form action="">
                        <div class="box active">
                            <div onclick="changTab(event)">
                                <span class="icon iconfont icontongxunlu"></span> <span class="line"></span>
                                <input type="text" placeholder="请输入手机号" maxlength="11" class="inputs" id="phone">
                            </div>
                        </div>
                        <div class="box">
                            <div onclick="changTab(event)">
                                <span class="icon iconfont iconmima"></span> <span class="line"></span>
                                <input type="text" placeholder="请输入验证码" class="inputs" id="checkcode" maxlength="6"
                                    onblur="checkPassCode()">
                                <span class="checkcode" id="getCode" onclick="getCheckCode()">获取验证码</span>
                            </div>
                        </div>
                        <div class="box" style="margin-bottom:10px;">
                            <div onclick="changTab(event)">
                                <span class="icon iconfont iconmima"></span> <span class="line"></span>
                                <input type="password" placeholder="请设置密码" class="inputs" id="password">
                            </div>
                        </div>
                        <div class="bottom">
                            <input type="checkbox" id="checked" disabled>我已同意 <span class="protocol"
                                onclick="modalOpen()">注册与使用协议</span>
                        </div>
                        <div style="text-align:center;">
                            <div class="submit" onclick="register()">注册</div>
                        </div>
                    </form>

                </div>

            </div>
        </nav>
    </div>

    <!-- 尾部 -->
    <footer>
        <div class="footer">
            <div class="footer-container">
                <div class="left">
                    <div class="footer-titles">售前咨询</div>
                    <div class="footer-containers">400-0168-029</div>
                    <div class="footer-containers">专业技术咨询</div>
                    <div class="footer-containers">全方位产品解读</div>
                    <div class="footer-containers">成熟解决方案</div>
                    <div class="footer-containers">成功客户案例分享</div>
                </div>
                <div class="middle">
                    <ul>
                        <li class="footer-titles">支持与服务</li>
                        <li class="footer-containers"><a href="serviceItems.html" target="_self">服务项目</a></li>
                        <li class="footer-containers"><a href="case.html" target="_self">案例</a></li>
                        <li class="footer-containers"><a href="product.html" target="_self">产品</a></li>
                    </ul>
                    <ul>
                        <li class="footer-titles">资讯</li>
                        <li class="footer-containers"><a href="information.html" target="_self">资讯</a></li>
                    </ul>
                    <ul>
                        <li class="footer-titles">常见问题</li>
                        <li class="footer-containers"><a href="commonProblem.html" target="_self">常见问题</a></li>
                    </ul>
                    <ul>
                        <li class="footer-titles">关于我们</li>
                        <li class="footer-containers"><a href="aboutus.html" target="_self">关于我们</a></li>
                    </ul>
                </div>
                <div class="right">
                    <div class="footer-titles">关注黑咖啡</div>
                    <img src="image/index/er.png" alt="" style="width:80px;height:80px;">
                </div>
            </div>
            <div class="footer-me">
                <p>版权所有：©2018，西安黑咖啡网络科技有限公司保留所有权力陕ICP<a
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=18005715">备案18005715号</a></p>
                <p>地址：西安市碑林区南稍门中贸广场2单元2307</p>
            </div>
            <div style="position:fixed;bottom:0px;left:0px;z-index:99999999999">
                <span class="icon iconfont iconkefu" style="margin-left:10px;cursor:pointer;color:#fff"
                    onclick="showModel()"></span>
            </div>
        </div>
        <div id="service">
            <iframe src="customerService.html" frameborder="0" id="frams"></iframe>
        </div>
    </footer>
    <!--添加模态框-->
    <div id="modal-box" style="display:none">
        <div class="modal-box">
            <!--顶部-->
            <div class="modal-box-top">
                <div class="modal-box-title">注册与使用协议</div>
                <!--关闭按钮 &times;会被转义成乘号（×）看上去就是关闭符号-->
                <!--关闭逻辑-->
                <span onclick="modalClose()" class="modal-close">
                    &times;
                </span>
            </div>
            <!--主体-->
            <div class="modal-box-content">
                <p>这是一段y用户使用协议</p>

            </div>
            <div class="modal-box-footer">
                <span id="time"></span><span class="choose" id="aggress">我已阅读完毕，并同意该协议</span>
            </div>

        </div>
    </div>
</body>
<script type="text/javascript">
    var page = window.pageVariable.Register;
    page.init();
    var code = 000000;
    var code;
    $("#checked").prop("checked", false);
    function getCheckCode(e) {
        let phone = document.getElementById('phone');
        let getCode = document.getElementById('getCode');
        if (phone.value.length == 0) {
            alert("请输入手机号码");
        } else {
            if (!(/^1[34578]\d{9}$/.test(phone.value))) {
                alert("手机号码有误，请重填")
            } else {
                code = 000000;
                page.getPasscode(phone.value).then(res => {
                    code = res;
                    t = setInterval(function () {
                        countdown()
                    }, 1000)
                    // alert("获取验证码成功");
                    //获取验证码成功后调用倒计时函数
                    countdown();

                })

            }
        }

    }
    var time = 60;
    function countdown() {
        if (time == 0) {
            $("#getCode").attr("onclick", "getCheckCode()")
            $("#getCode").text("获取验证码");
            time = 60;
            clearInterval(t);
        } else {
            $("#getCode").removeAttr("onclick");
            $("#getCode").text("重新发送" + time);
            time--;
        }
    }
    function checkPassCode() {
        let phone = document.getElementById('phone').value;
        let checkcode = document.getElementById('checkcode').value;
        if (checkcode.length > 0) {
            page.checkPassCode(phone, checkcode).then(res => {
                if (res.result == 'Success') {
                    alert("验证码正确")
                } else {
                    alert("请输入正确的验证码")
                }

            }).catch(err => {
                console.log(err.error_message)
            })
        }

    }
    function register() {
        let phone = document.getElementById('phone')
        let code = document.getElementById('checkcode')
        let password = document.getElementById('password')
        let checked = document.getElementById('checked')
        if (!checked.checked) {
            alert("请先同意注册与使用协议");
            return
        }
        if (phone.value.length == 0) {
            alert("请输入手机号码");
        } else {
            if (!(/^1[34578]\d{9}$/.test(phone.value))) {
                alert("手机号码有误，请重填");
            } else {
                if (code.value.length == 0) {
                    alert("请输入验证码");
                } else {
                    //   if (code.value != code) {
                    //    alert("请输入正确的验证码")
                    //  } else {
                    //可以注册了
                    let params = {
                        phone: phone.value,
                        password: password.value,
                        pass_code: code.value,
                    }
                    page.register(params).then(res => {
                        if (res) {
                            alert('注册成功，正在跳转至登录页面！')
                            window.location = "login.html"
                        }
                    }).catch(err => {
                        alert('身份信息认证失败！')
                    })
                    //   }
                }
            }
        }
    }
    function changTab(e) {
        let that = e.target;
        $(that).parents('.box').addClass('active');
        $(that).parents('.box').siblings().removeClass('active');
        $(that).parents('.box').find('.icon').addClass('active');
        $(that).parents('.box').find('.icon').siblings().removeClass('active');
    }
    //显示模态框
    var t;
    function modalOpen() {
        //获取模态框对象   getElementsByClassName获取到的是一个数组对象
        //获取浏览器当前宽高
        let documentWidth = $(window).width();
        let documentHeight = $(window).height();
        //获取模态框宽度
        let modalWidth = $(".modal-box").height();
        let modalHeight = $(".modal-box").width();
        //计算弹出窗口的左上角X的偏移量
        var popX = (documentWidth - modalWidth) / 2 - 200;
        // 计算弹出窗口的左上角Y的偏移量为窗口的高度 - 弹窗高度 / 2 + 被卷去的页面的top
        var popY = (documentHeight - modalHeight) / 2 + $(document).scrollTop();
        //设定窗口的位置
        $(".modal-box").css("top", popY);
        $(".modal-box").css("left", popX);
        //设置为可见
        $('#modal-box').css("display", 'block');
        times = 20
        t = setInterval(function () {
            agreementCountdown()
        }, 1000)
        agreementCountdown();
    }
    function modalClose() {
        $('#modal-box').css("display", 'none');
        times = 20;
        clearInterval(t);
    }
    function agree() {
        $("#checked").prop("checked", true);
        $("#checked").css('background-color', '#f7edb8');
        $('#modal-box').css("display", 'none');
    }
    var times = 20;
    function agreementCountdown() {
        if (times == 0) {
            $("#aggress").attr("onclick", "agree()")
            $("#time").hide()
            $("#aggress").css("background", '#46d2f0')
            $("#aggress").css("color", '#fff');
            $("#aggress").css("cursor", 'pointer')
            times = 20;
            clearInterval(t);
        } else {
            $("#aggress").removeAttr("onclick");
            $("#aggress").css("border", '1px solid #f2f2f2');
            $("#aggress").css("cursor", 'wait')
            $("#aggress").css("color", '#ccc');
            $("#aggress").css("background", '#fff')
            $("#time").show()
            $("#time").text(times + '秒后');
            times--;
        }
    }
</script>
